<template>
  <div class="login">
    <!-- <h1 class="login_text">振涛教育</h1> -->
    <div class="box">
      <li class="text">振涛教育考务管理后台</li>
      <li><el-input placeholder="请输入内容" v-model="user" clearable prefix-icon="el-icon-user" style="height:100%"></el-input></li>
      <li><el-input placeholder="请输入密码" v-model="pwd" show-password prefix-icon="el-icon-lock" style="height:100%"></el-input></li>
      <li class="randomclo">
        <el-input placeholder="请输入验证码,点击刷新验证码" style="width: 65%;height:100%" v-model="random" prefix-icon="el-icon-lock"></el-input>
        <div  @click="Refresh" class="randombox">
          <span class="random" :style="[{color:$randomcolor(index)}]" v-for="(item,index) in arr" :key="index">{{item}}</span>
        </div>
      </li>
      <li> <el-button type="info" size="medium" class="btn" @click="login" :disabled="btnType">登录</el-button></li>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        user: '',
        pwd:'',
        random:"",
        btnType:true,
        arr:this.$Random(),
        back:this.$randomcolor(0)
      }
    },
      methods:{
        Refresh(){
          this.arr=this.$Random()
          this.back=this.$randomcolor(0)
        },
         login(){
           const {user,pwd,random,arr} = this;
           if(!user){
              this.$message({
                message: '账号不可为空',
                type: 'warning'
              });
              return
           }
           if(!pwd){
             this.$message({
                message: '密码不可为空',
                type: 'warning'
              });
              return
           }
           if(!random){
             this.$message({
                message: '请输入验证码',
                type: 'warning'
              });
              return
           }
           let str=""
           arr.map(item=>{
             str+=item
           })
           if(random.trim()!==str){
             this.$message({
                message: '验证码错误',
                type: 'warning'
              });
              this.arr=this.$Random()
              return
           }
            this.$httpAxios(this.$api.LOGIN({username:user,password:pwd}),res=>{
              if(res.code===1){
                 this.$message({
                  message: '登录成功',
                  type: 'success'
                });
                sessionStorage.user=res.data.username
                sessionStorage.userid=res.data.userid
                this.$router.push('/home')
              }             
            })
         }
      },
      updated(){
         const {user,pwd,random,arr} = this;
        if(!(!user||!pwd||!random)){
          this.btnType=false
        }else{
          this.btnType=true
        }
      }
  }
</script>
<style scoped>
  .text{
    
    text-align: center;
    /* text-shadow: 4px 4px 2px #9e9e9e;
    font-weight: 900;
    font-size: 28px;
    opacity: 0.7; */
  }
  .login{
    width: 100vw;
    height: 100vh;
    background: #fff;
    font-size: 20px;
    /* background: black; */
    display: flow-root;
  }
  .box{
    border-radius: 15px;
    line-height: 60px;
    width: 500px;
    height: 384px;
    position: absolute;
    padding-top: 35px;
    box-sizing: border-box;
    padding-left: 35px;
    padding-right: 35px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    border: 1px solid #ccc;
    background: #fff;
  }
  .btn{
    width: 420px;
    background: #101935;
    height: 50px;
    display: block;
    margin: 0 auto;
  }
  .randombox{
    width: 90px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    box-sizing: border-box;
  }
  .random{
    font-family: 'STHupo',
                  Arial,sans-serif;
  }
  .randomclo{
    display: flex;
    justify-content: space-between;
  }
   .login_text {
     margin-top: 100px;
        text-align:center;
        color:#fff;
        font-size:48px;
       font-family: 'Fruktur', cursive;
       text-shadow: 1px  1px 1px #ccc,
                      0 0 10px #fff,
                      0 0 20px #fff,
                      0 0 30px #fff,
                      0 0 40px #3EFF3E,
                      0 0 70px #3EFF3E,
                      0 0 80px #3EFF3E,
                      0 0 100px #3EFF3E,
                      0 0 150px #3EFF3E;

        transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
        -o-transform-style: preserve-3d;


            animation: run  ease-in-out 9s infinite;
       -moz-animation: run  ease-in-out 9s infinite ;
    -webkit-animation: run  ease-in-out 9s infinite;
    -ms-animation: run  ease-in-out 9s infinite;

         -o-animation: run  ease-in-out 9s infinite;
    }

    @keyframes run {
          0% {
            transform:rotateX(-5deg) rotateY(0);
          }
        50% {
            transform:rotateX(0) rotateY(180deg);
             text-shadow: 1px  1px 1px #ccc,
                      0 0 10px #fff,
                       0 0 20px #fff,
                       0 0 30px #fff,
                       0 0 40px #3EFF3E,
                       0 0 70px #3EFFff,
                       0 0 80px #3EFFff,
                       0 0 100px #3EFFee,
                       0 0 150px #3EFFee;

          }
          100% {
            transform:rotateX(5deg) rotateY(360deg);
          }
        }

    @-moz-keyframes run {
          0% {
            -moz-transform:rotateX(-5deg) rotateY(0);

          }
        50% {
            -moz-transform:rotateX(0) rotateY(180deg);
             text-shadow: 1px  1px 1px #ccc,
                      0 0 10px #fff,
                       0 0 20px #fff,
                       0 0 30px #fff,
                       0 0 40px #3EFF3E,
                       0 0 70px #3EFFff,
                       0 0 80px #3EFFff,
                       0 0 100px #3EFFee,
                       0 0 150px #3EFFee;
          }
          100% {
            -moz-transform:rotateX(5deg) rotateY(360deg);
          }
        }

    @-webkit-keyframes run {
          0% {
            -webkit-transform:rotateX(-5deg) rotateY(0);

          }
        50% {
            -webkit-transform:rotateX(0) rotateY(180deg);
             text-shadow: 1px  1px 1px #ccc,
                      0 0 10px #fff,
                       0 0 20px #fff,
                       0 0 30px #fff,
                       0 0 40px #3EFF3E,
                       0 0 70px #3EFFff,
                       0 0 80px #3EFFff,
                       0 0 100px #3EFFee,
                       0 0 150px #3EFFee;

          }
          100% {
            -webkit-transform:rotateX(5deg) rotateY(360deg);
          }
        }
    @-ms-keyframes run {
          0% {
            -ms-transform:rotateX(-5deg) rotateY(0);

          }
        50% {
            -ms-transform:rotateX(0) rotateY(180deg);

          }
          100% {
            -ms-transform:rotateX(5deg) rotateY(360deg);
          }
        }
</style>